<template>
  <div class="products-list">
    <div class="page-header">
      <h1>产品列表</h1>
      <button class="btn btn-primary refresh-btn" @click="fetchProducts" :disabled="loading">
        {{ loading ? '加载中...' : '刷新' }}
      </button>
    </div>
    
    <div class="search-filter">
      <div class="form-group">
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索产品名称、生产商或ID" 
          class="search-input"
        >
      </div>
    </div>
    
    <div class="card" v-if="loading">
      <p class="loading">加载中，请稍后...</p>
    </div>

    <div class="card" v-else-if="error">
      <p class="error">{{ error }}</p>
      <pre class="debug-info">{{ debugInfo }}</pre>
      <button class="btn btn-primary" @click="fetchProducts">重试</button>
    </div>
    
    <div class="card" v-else-if="products.length === 0">
      <p class="no-data">暂无产品数据</p>
      <pre class="debug-info">{{ debugInfo }}</pre>
      <button class="btn btn-primary" @click="fetchProducts">重新加载</button>
    </div>
    
    <div v-else>
      <div class="card product-item" v-for="product in filteredProducts" :key="product.id">
        <pre v-if="isDevelopment" class="debug-info">
          {{ JSON.stringify(product, null, 2) }}
        </pre>
        <div class="product-header">
          <h2 class="product-title">{{ product.name }}</h2>
          <span class="product-id">ID: {{ product.id }}</span>
        </div>
        
        <div class="product-info">
          <div class="info-item">
            <span class="label">产品名称：</span>
            <span class="value">{{ getSavedName(product.id) || product.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">生产日期：</span>
            <span class="value">{{ formatDate(product.productionDate) }}</span>
          </div>
          <div class="info-item">
            <span class="label">生产商：</span>
            <span class="value">{{ getSavedProducer(product.id) || product.producer }}</span>
          </div>
          <div class="info-item">
            <span class="label">原产地：</span>
            <span class="value">{{ getOrigin(product.id) || product.origin || '未知' }}</span>
          </div>
         
          <div class="info-item">
            <span class="label">质检记录：</span>
            <span class="value">{{ getSavedInspections(product.id)?.length || (product.inspections ? product.inspections.length : 0) }} 条</span>
          </div>
        </div>
        
        <div class="product-actions">
          <button class="btn btn-primary" @click="viewProductDetail(product.id)">
            查看详情
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { productApi } from '@/services/api'

export default {
  name: 'ProductsList',
  data() {
    return {
      products: [],
      loading: false,
      error: null,
      searchQuery: '',
      debugInfo: '未获取到数据',
      lastRefresh: Date.now()
    };
  },
  computed: {
    isDevelopment() {
      return process.env.NODE_ENV === 'development';
    },
    filteredProducts() {
      if (!this.searchQuery.trim() || !this.products || this.products.length === 0) {
        return this.products || [];
      }
      
      const query = this.searchQuery.toLowerCase();
      return this.products.filter(product => {
        if (!product) return false;
        
        return (
          (product.name && product.name.toLowerCase().includes(query)) ||
          (product.producer && product.producer.toLowerCase().includes(query)) ||
          (product.origin && product.origin.toLowerCase().includes(query)) ||
          (product.id && product.id.toLowerCase().includes(query))
        );
      });
    }
  },
  mounted() {
    console.log('ProductsList 组件已挂载');
    console.log('当前环境:', process.env.NODE_ENV);
    this.fetchProducts();
    // 每60秒自动刷新一次
    this.refreshInterval = setInterval(() => {
      console.log('执行定时刷新');
      this.fetchProducts();
    }, 60000);
  },
  beforeDestroy() {
    console.log('ProductsList 组件即将销毁');
    // 清除定时器
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
  },
  watch: {
    // 监听路由变化，当URL参数中包含refresh=true时刷新列表
    '$route.query': {
      handler(query) {
        console.log('路由查询参数变化:', query);
        if (query.refresh === 'true') {
          console.log('检测到刷新参数，重新获取产品列表');
          this.fetchProducts();
        }
      },
      immediate: true
    }
  },
  methods: {
    async fetchProducts() {
      this.loading = true;
      this.error = null;
      this.debugInfo = '正在获取产品数据...';
      try {
        console.log('开始获取产品列表...');
        
        // 尝试先获取所有产品ID，然后逐个获取详情
        let productsList = [];
        
        try {
          // 先尝试 /product/list 接口
          console.log('尝试使用 /product/list 接口');
          const listResponse = await productApi.getProductsList();
          console.log('API完整响应 (list):', listResponse);
          
          if (listResponse && listResponse.code === '0') {
            if (Array.isArray(listResponse.data)) {
              productsList = listResponse.data.filter(item => item && typeof item === 'object');
              console.log('从list接口获取到产品数量:', productsList.length);
              this.debugInfo = `从list接口获取到产品数量: ${productsList.length}`;
            } else {
              console.warn('从list接口获取的数据不是数组类型:', typeof listResponse.data);
              this.debugInfo = `警告: list接口返回的数据格式不正确: ${JSON.stringify(listResponse.data, null, 2)}`;
            }
          } else {
            console.warn('list接口响应码不为0:', listResponse?.code);
            this.debugInfo = `警告: list接口响应码: ${listResponse?.code || '未知'}, 消息: ${listResponse?.message || '无'}`;
          }
        } catch (listError) {
          console.error('获取产品列表失败:', listError);
          this.debugInfo = `获取产品列表失败: ${listError.message || '未知错误'}\n尝试备用API...`;
          // 如果list接口失败，尝试另一个接口
        }
        
        // 如果list接口没有返回数据，尝试使用 /product 接口
        if (productsList.length === 0) {
          try {
            console.log('尝试使用 /product 接口获取产品ID');
            const idsResponse = await productApi.getProducts();
            console.log('API产品ID响应:', idsResponse);
            
            if (idsResponse && idsResponse.code === '0' && idsResponse.data) {
              const productIds = idsResponse.data;
              console.log('获取到的产品ID:', productIds);
              this.debugInfo = `从/product接口获取到${Array.isArray(productIds) ? productIds.length : 0}个产品ID`;
              
              // 根据ID获取产品详情
              if (Array.isArray(productIds)) {
                const totalIds = productIds.length;
                let processedCount = 0;
                
                for (const idItem of productIds) {
                  // 处理不同格式的ID
                  let productId;
                  if (Array.isArray(idItem) && idItem.length > 0) {
                    productId = idItem[0] ? idItem[0].toString() : null;
                  } else if (typeof idItem === 'string') {
                    productId = idItem;
                  } else if (idItem) {
                    productId = idItem.toString();
                  }
                  
                  if (productId) {
                    try {
                      processedCount++;
                      console.log(`尝试获取产品详情 (${processedCount}/${totalIds}):`, productId);
                      this.debugInfo = `正在获取产品详情 (${processedCount}/${totalIds}): ${productId}`;
                      
                      const detailResponse = await productApi.getProductDetail(productId);
                      if (detailResponse && detailResponse.code === '0' && detailResponse.data) {
                        productsList.push(detailResponse.data);
                        console.log(`成功获取产品详情 (${processedCount}/${totalIds}):`, productId);
                      } else {
                        console.warn(`产品 ${productId} 详情响应不正确:`, detailResponse);
                      }
                    } catch (detailError) {
                      console.error(`获取产品 ${productId} 详情失败:`, detailError.message);
                    }
                  }
                }
              } else {
                console.warn('获取到的产品ID不是数组:', typeof productIds);
                this.debugInfo = `警告: 产品ID不是数组格式: ${JSON.stringify(productIds)}`;
              }
            } else {
              console.warn('产品ID接口响应不正确:', idsResponse);
              this.debugInfo = `警告: 产品ID接口响应码: ${idsResponse?.code || '未知'}, 消息: ${idsResponse?.message || '无'}`;
            }
          } catch (idsError) {
            console.error('获取产品ID列表失败:', idsError);
            this.debugInfo = `获取产品ID列表失败: ${idsError.message || '未知错误'}`;
          }
        }
        
        console.log('最终获取到的产品:', productsList);
        
        // 过滤无效数据和已删除的产品
        this.products = productsList.filter(p => {
          if (!p || typeof p !== 'object') {
            console.warn('无效的产品数据类型:', typeof p);
            return false;
          }
          
          // 检查产品是否在后端标记为已删除
          if (p.isDeleted) {
            console.log('跳过后端标记已删除的产品:', p.id);
            return false;
          }
          
          // 检查localStorage中是否标记产品为已删除
          try {
            const isLocalDeleted = localStorage.getItem(`product_deleted_${p.id}`) === 'true';
            if (isLocalDeleted) {
              console.log('跳过本地标记已删除的产品:', p.id);
              return false;
            }
          } catch (e) {
            console.error('检查本地删除状态出错:', e);
          }
          
          return true;
        });
        
        if (this.products.length > 0) {
          this.debugInfo = `成功获取到 ${this.products.length} 个产品`;
          this.error = null;
        } else {
          this.debugInfo = `未获取到任何可用产品数据\n原始数据长度: ${productsList.length}\n请检查后端API返回格式`;
          this.error = '未找到可显示的产品';
        }
      } catch (error) {
        console.error('获取产品列表失败', error);
        this.error = '获取产品列表失败，请检查网络连接或后端服务是否正常运行';
        this.debugInfo = `错误信息: ${error.message || '未知错误'}\n\n响应内容: ${JSON.stringify(error.response || {}, null, 2)}`;
        this.products = [];
      } finally {
        this.loading = false;
        
        if (this.$route.query.refresh === 'true') {
          this.$router.replace({
            path: this.$route.path,
            query: { ...this.$route.query, refresh: undefined, t: undefined }
          }).catch(err => console.error('路由更新失败:', err));
        }
      }
    },
    
    // 提取产品ID
    extractProductIds(data) {
      const productIds = [];
      
      for (const item of data) {
        if (typeof item === 'string') {
          productIds.push(item);
        } else if (Array.isArray(item)) {
          // 如果是数组，尝试获取第1个或第2个元素作为ID
          if (item.length > 1 && item[1]) {
            productIds.push(item[1]);
          } else if (item.length > 0 && item[0]) {
            productIds.push(item[0]);
          }
        } else if (item && typeof item === 'object') {
          // 如果是对象，尝试获取id属性
          if (item.id) {
            productIds.push(item.id);
          }
        }
      }
      
      return productIds;
    },
    
    // 逐个获取产品详情
    async fetchProductDetails(productIds) {
      const products = [];
      
      for (const id of productIds) {
        try {
          console.log(`获取产品详情: ${id}`);
          const response = await productApi.testGetProduct(id);
          
          if (response && response.code === '0' && response.data) {
            products.push(response.data);
          }
        } catch (e) {
          console.error(`获取产品 ${id} 详情失败:`, e);
        }
      }
      
      if (products.length > 0) {
        this.products = products;
        this.debugInfo = `成功获取到 ${products.length} 个产品详情`;
      }
    },
    
    formatDate(timestamp) {
      try {
        if (!timestamp) {
          console.warn('formatDate: 时间戳为空', timestamp);
          return '未知日期';
        }
        
        console.log('格式化日期，原始值:', timestamp, '类型:', typeof timestamp);
        
        // 尝试转换为合适的时间戳格式
        let dateTimestamp;
        
        if (typeof timestamp === 'object' && timestamp !== null) {
          // 如果是BigInteger等对象，转为字符串再转数字
          dateTimestamp = parseInt(timestamp.toString());
        } else if (typeof timestamp === 'string') {
          // 如果是字符串，直接解析
          dateTimestamp = parseInt(timestamp);
        } else {
          // 其他情况直接使用
          dateTimestamp = timestamp;
        }
        
        console.log('转换后的时间戳:', dateTimestamp);
        
        // 检查时间戳是否有效数字
        if (isNaN(dateTimestamp)) {
          console.warn('无效的时间戳数值:', timestamp);
          return '日期格式错误';
        }
        
        // 检查时间戳是否小于1000000000000，如果是则可能是秒级时间戳（需要乘以1000）
        if (dateTimestamp < 10000000000) {
          console.log('检测到秒级时间戳，转换为毫秒');
          dateTimestamp = dateTimestamp * 1000;
        }
        
        const date = new Date(dateTimestamp);
        
        // 检查日期是否有效
        if (isNaN(date.getTime())) {
          console.warn('无效的日期对象:', date, '原始时间戳:', timestamp);
          return '日期格式错误';
        }
        
        console.log('最终日期对象:', date, date.toISOString());
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
      } catch (error) {
        console.error('格式化日期时出错:', error, '原始值:', timestamp);
        return '日期处理错误';
      }
    },
    
    viewProductDetail(id) {
      console.log('查看产品详情:', id);
      // 确保id是字符串
      const productId = id ? id.toString() : '';
      if (!productId) {
        console.error('无效的产品ID');
        return;
      }
      
      // 先在已有的产品中查找该产品，如果存在则缓存详情
      const product = this.products.find(p => p.id && p.id.toString() === productId);
      if (product) {
        console.log('从列表中获取到产品详情:', product);
        // 将产品详情存储到localStorage中，以便在详情页使用
        try {
          this.cacheProduct(productId, product);
        } catch (e) {
          console.error('缓存产品详情失败:', e);
        }
      }
      
      // 导航到产品详情页
      this.$router.push(`/product/${productId}`);
    },

    handleError(error, context) {
      console.error(`${context}:`, error);
      this.error = `${context}: ${error.message || '未知错误'}`;
      this.debugInfo = JSON.stringify({
        message: error.message,
        response: error.response?.data,
        status: error.response?.status,
        config: error.config
      }, null, 2);
    },

    // 格式化所有者信息
    formatOwner(owner) {
      if (!owner) return '未知';
      
      console.log('格式化所有者信息:', owner, '类型:', typeof owner);
      
      try {
        // 如果是数组字符串，如 '[0x123...]'
        if (typeof owner === 'string' && owner.startsWith('[') && owner.endsWith(']')) {
          try {
            // 尝试解析JSON
            const parsed = JSON.parse(owner);
            if (Array.isArray(parsed)) {
              if (parsed.length === 0) return '未指定所有者';
              return parsed.join(', ');
            }
            return owner;
          } catch (e) {
            // 简单处理方式：移除方括号
            return owner.substring(1, owner.length - 1);
          }
        }
        
        // 如果是数组
        if (Array.isArray(owner)) {
          if (owner.length === 0) return '未指定所有者';
          return owner.join(', ');
        }
        
        // 如果是对象
        if (typeof owner === 'object' && owner !== null) {
          return JSON.stringify(owner);
        }
        
        // 其他情况直接返回
        return owner;
      } catch (error) {
        console.error('格式化所有者信息出错:', error);
        return String(owner);
      }
    },

    onSearchInput() {
      // 记录搜索事件
      console.log('搜索查询:', this.searchQuery);
      this.debugInfo = `${this.debugInfo || ''}\n搜索查询: ${this.searchQuery}`;
    },

    viewProductDetails(id) {
      if (!id) {
        console.warn('尝试查看无效产品ID:', id);
        return;
      }
      
      console.log('查看产品详情:', id);
      this.$router.push({ name: 'ProductDetail', params: { id } });
    },

    handleImageError(event, product) {
      console.warn('图片加载失败:', product.imageUrl, '产品ID:', product.id);
      event.target.src = '/img/placeholder.png'; // 替换为默认图片
      
      // 添加到调试信息
      if (this.isDevelopment) {
        this.debugInfo = `${this.debugInfo || ''}\n图片加载失败: ${product.imageUrl} (产品ID: ${product.id})`;
      }
    },

    formatPrice(price) {
      if (price === undefined || price === null) {
        return '暂无价格';
      }
      
      try {
        // 转换为数字并格式化为两位小数
        const numPrice = Number(price);
        if (isNaN(numPrice)) {
          console.warn('无效价格格式:', price);
          return '价格格式错误';
        }
        
        return numPrice.toFixed(2);
      } catch (error) {
        console.error('格式化价格出错:', error, '原始价格:', price);
        return '价格错误';
      }
    },

    clearDebugInfo() {
      this.debugInfo = '';
      console.log('调试信息已清除');
    },

    getOwnerAddress(productId) {
      // 检查是否有保存的转移地址
      try {
        const savedOwner = localStorage.getItem(`owner_${productId}`);
        if (savedOwner) {
          return savedOwner;
        }
      } catch (e) {
        console.error('获取所有者地址错误:', e);
      }
      // 使用默认合约所有者地址
      return "0xe0b7b13a5f881e5390188b56b2e2d9dd8d15d345";
    },
    
    getOrigin(productId) {
      try {
        return localStorage.getItem(`origin_${productId}`);
      } catch (e) {
        console.error('获取原产地信息错误:', e);
        return null;
      }
    },
    
    cacheProduct(productId, product) {
      try {
        localStorage.setItem('product_' + productId, JSON.stringify(product));
      } catch (e) {
        console.error('缓存产品详情失败:', e);
      }
    },
    
    // 获取保存的产品名称
    getSavedName(productId) {
      try {
        return localStorage.getItem(`name_${productId}`);
      } catch (e) {
        console.error('获取产品名称错误:', e);
        return null;
      }
    },
    
    // 获取保存的生产商
    getSavedProducer(productId) {
      try {
        return localStorage.getItem(`producer_${productId}`);
      } catch (e) {
        console.error('获取生产商错误:', e);
        return null;
      }
    },
    
    // 获取保存的质检记录
    getSavedInspections(productId) {
      try {
        const savedData = localStorage.getItem(`inspections_${productId}`);
        if (savedData) {
          return JSON.parse(savedData);
        }
        return null;
      } catch (e) {
        console.error('获取质检记录错误:', e);
        return null;
      }
    },

    verifyData(product) {
      // 实现验证逻辑
      // 这里可以根据需要添加更多的验证逻辑
      const isDataChanged = 
        this.verifyData.name !== product.name ||
        this.verifyData.producer !== product.producer ||
        this.verifyData.origin !== product.origin;

      if (isDataChanged) {
        console.log('用户修改了验证数据，验证失败');
        this.verifyResult = false;
        return;
      }

      this.verifyResult = true;
    }
  }
}
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.refresh-btn {
  min-width: 80px;
}

.search-filter {
  margin-bottom: 1.5rem;
}

.search-input {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 1rem;
  width: 100%;
  background-color: #f0f8ff; /* 浅蓝色背景 */
  border: 1px solid #b0e0e6; /* 浅蓝色边框 */
}

.loading, .no-data, .error {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.error {
  color: #d9534f;
}

.debug-info {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f0f8ff; /* 浅蓝色背景 */
  border-radius: 4px;
  font-size: 0.9rem;
  overflow: auto;
  max-height: 300px;
  text-align: left;
  border: 1px solid #b0e0e6; /* 浅蓝色边框 */
}

.product-item {
  margin-bottom: 1.5rem;
  transition: transform 0.2s;
  background-color: #f0f8ff; /* 浅蓝色背景 */
  border: 1px solid #b0e0e6; /* 浅蓝色边框 */
  box-shadow: 0 3px 10px rgba(176, 224, 230, 0.2); /* 浅蓝色阴影 */
}

.product-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(176, 224, 230, 0.4); /* 浅蓝色阴影增强 */
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #b0e0e6; /* 浅蓝色边框 */
}

.product-title {
  margin: 0;
  color: #20b2aa; /* 浅绿色文字 */
}

.product-id {
  font-size: 0.85rem;
  color: #666;
  background-color: #e0f0e0; /* 浅绿色背景 */
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #90ee90; /* 浅绿色边框 */
}

.product-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-item .label {
  font-size: 0.85rem;
  color: #5f9ea0; /* 浅蓝色文字 */
  margin-bottom: 0.25rem;
}

.owner-address {
  font-family: monospace;
  font-size: 0.85rem;
  word-break: break-all;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  font-weight: 500;
  cursor: pointer;
}

.btn-primary {
  background-color: #20b2aa; /* 浅绿色背景 */
  color: white;
}

.btn-primary:hover {
  background-color: #008080; /* 深绿色背景 */
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #b0e0e6; /* 浅蓝色边框 */
}
</style>    